                                             <!-- 搜索头部组件 -->

<!-- 传入属性 -->
<!-- searchUrl:跳转地址
     searchDefault:传递默认输入内容-->
<!-- 传入方法 -->
<!-- searchBack：调取父组件函数  进行返回回调函数处理）-->
<!-- searchClick：调取父组件函数  传递双向绑定输入文字searchText （若是有地址searchUrl传入则会跳转，否则调取此函数）-->

<!--注：因input框在vue 和 uni 中有不同标签，故使用时，根据实际项目进行选择用什么的input框  下方已备注好，自行使用-->

<template>
  <div class="searchHead">
    <!-- 左部箭头返回图 -->
    <div class="searchHead-left" @click="searchHeadLeft"></div>

    <!-- 中区文字搜索区 -->
    <div class="searchHead-text">
      <!-- 搜索图标 -->
      <div class="searchHead-text-icon"></div>

      <!-- 搜索输入 (uni 时的使用方法)-->
      <input
        type="text"
        class="searchHead-text-input"
        placeholder-style="color:#999999;font-size:13px;font-weight:400"
        v-model="searchText"
        placeholder="搜索商家、商品、服务"
      />
      <!-- 搜索输入 (vue 时的使用方法)-->
      <!-- <input
        type="text"
        class="searchHead-text-input"
        v-model="searchText"
        placeholder="搜索商家、商品、服务"
      /> -->

      <!-- 清除文字按键 -->
      <div
        class="searchHead-text-btn"
        v-show="searchText"
        @click="cleanText"
      ></div>
    </div>

    <!-- 右部搜索按键 -->
    <div class="searchHead-search" @click="searchBtn">搜索</div>
  </div>
</template>

<script>
export default {
  props: {
    // 跳转地址
    searchUrl: {
      type: [String],
      default: "",
    },

    // 传递默认输入内容
    searchDefault: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {
      // input双向绑定属性
      searchText: "",
    };
  },
  created() {
    // 判断是否有默认信息传入,有则同步
    this.searchDefault
      ? (this.searchText = this.searchDefault)
      : (this.searchText = "");
  },
  methods: {
    // 左部箭头返回函数
    searchHeadLeft() {
      // 调用父级组件的返回函数回调函数 （因为不能确定使用情况是否是vue框架，故做此处的回调处理）
      this.$emit('searchBack')
    },

    // 清除input输入文字按键
    cleanText() {
      this.searchText = "";
    },

    // 搜索按键
    searchBtn() {
      // 判断跳转地址是否有传入,若是有,则跳转地址,否则则调取父组件函数
      if (this.searchUrl) {
        uni.navigateTo({
          url: this.searchUrl + "?value=" + this.searchText,
        });
      } else {
        // 调取父组件函数  传递双向绑定输入文字searchText
        this.$emit("searchClick", {
          searchText: this.searchText,
        });
      }
    },
  },
};
</script>

<style scoped>
/*  搜索头部组件 */
.searchHead {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px 1px 0px 0px rgba(240, 240, 240, 0.5);
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #333333;
}

/*  左部箭头返回图 */
/*  -------------------------------------------------------------------------------------- */
.searchHead-left {
  width: 9px;
  height: 16px;
  margin: auto 16px auto 16px;
  background-image: url("https://oss4.komect.com/equity-home/h5/fh.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  中区文字搜索区 */
/*  -------------------------------------------------------------------------------------- */
.searchHead-text {
  width: 271px;
  height: 34px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

/* vue时input框默认文字样式 */
/* .searchHead-text::-webkit-input-placeholder {
  color: #999999;
  font-size: 13px;
  font-weight: 400;
} */

/*  搜索图标 */
.searchHead-text-icon {
  width: 16px;
  height: 16px;
  margin: auto 8px auto 16px;
  background-image: url("https://oss4.komect.com/equity-home/h5/20211130ssuo_ic_ss@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  搜索输入 */
.searchHead-text-input {
  width: 196px;
  height: 13px;
  text-align: left;
  font-size: 13px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #333333;
}

/*  清除文字按键 */
.searchHead-text-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 7px;
  background-image: url("https://oss4.komect.com/equity-home/h5/20211130ssuo_ic_gb@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  右部搜索按键 */
/*  -------------------------------------------------------------------------------------- */
.searchHead-search {
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  color: #333333;
  margin-left: 16px;
}
</style>
